<script setup>

import router from "@/router.js";
import moment from 'moment';
import InputIcon from "primevue/inputicon";
import IconField from "primevue/iconfield";
import {ApiServiceList} from "@/api/service.js";
import {useRequest} from "ahooks-vue";
import {computed} from "vue";

const {
  data: serviceData,
  loading: serviceLoading,
  run: instanceRun,
  refresh: instanceRefresh
} = useRequest(ApiServiceList)

const serviceList = computed(() => serviceData.value?.data.list || []);

</script>

<template>
  <div class="card" style="height: 80vh">
     <div  class="font-semibold text-xl mb-4">服务管理</div>
    <DataTable :value="serviceList" paginator :rows="10" dataKey="id" :loading="serviceLoading" scrollable
               scrollHeight="50vh">
      <!--      <template #header>-->
      <!--        <div class="flex justify-between">-->
      <!--          <div>-->
      <!--            <Button class="mr-2" type="button" icon="pi pi-plus" label="新建" @click="showCreate"/>-->
      <!--          </div>-->
      <!--          <IconField iconPosition="left">-->
      <!--            <InputIcon>-->
      <!--              <i class="pi pi-search"/>-->
      <!--            </InputIcon>-->
      <!--            <InputText placeholder="任务名称搜索"/>-->
      <!--          </IconField>-->
      <!--        </div>-->
      <!--      </template>-->
      <Column field="name" header="名称"></Column>
      <!--      <Column field="script_name" header="程序类型"></Column>-->
      <!--      <Column field="cron" header="运行命令"></Column>-->
      <!--      <Column field="args" header="参数"></Column>-->
      <Column field="statename" header="状态">
        <!--        <template #body="slotProps">-->
        <!--          <Tag v-if="slotProps.data.enable === false" severity="warn" value="禁用"></Tag>-->
        <!--          <Tag severity="success" value="成功" v-else-if="slotProps.data.last_status === 0"></Tag>-->
        <!--          <Tag v-else-if="slotProps.data.last_status === 1" severity="danger" value="失败"></Tag>-->
        <!--          <Tag v-else severity="info" value="等待"></Tag>-->
        <!--        </template>-->
      </Column>
      <Column field="pid" header="进程ID"/>

      <Column field="start" header="启动时间">
        <template #body="slotProps">
          {{ moment.unix(slotProps.data.now).format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </Column>
      <Column field="logfile" header="日志">
        <!--        <template #body="slotProps">-->
        <!--          <a class="cursor-pointer"-->
        <!--             @click="() => router.push({name: 'TaskHistories', query: {task_id: slotProps.data.id}})">查看</a>-->
        <!--        </template>-->
      </Column>
      <!--      <Column field="username" header="创建者"></Column>-->
      <Column field="action" header="操作">
        <template #body="slotProps">
          <Button icon="pi pi-play-circle" severity="success" rounded text ></Button>
          <Button icon="pi pi-stop-circle" rounded text ></Button>
          <!--          <i class="pi pi-play-circle" @click="() => showEditor(slotProps.data)"></i>-->
          <!--          <i class="pi pi-stop-circle ml-3" @click="() => onRemove(slotProps.data.id)"></i>-->
        </template>
      </Column>
    </DataTable>
  </div>

</template>


<style scoped>

</style>